<script setup>
import { onBeforeUnmount, onMounted, ref } from 'vue'
import CoinIcon from '@/components/icons/CoinIcon.vue'
import fetchCoin from '@/utils/fetchCoin'

const coins = ref(0)
const video = ref(null)
const url = import.meta.env.VITE_VIDEO_URL || ''

defineProps({
  videoUrl: String
})

onMounted(async () => {
  coins.value = await fetchCoin('1')
})

onBeforeUnmount(() => {
  if (video.value) {
    video.value.pause()
    video.value.currentTime = 0
  }
})
</script>
<template>
  <div style="z-index: 100">
    <div
      style="
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      "
    >
      <coin-icon :size="64" />
      <span style="font-size: 36px; margin-left: 8px; color: white">{{ coins }}</span>
    </div>
    <div>
      <video
        controls
        autoplay
        ref="video"
        style="width: 100%"
        class="base-border"
        :src="url + videoUrl"
        type="video/mp4"
      >
        Your browser does not support the video tag.
      </video>
    </div>
  </div>
</template>
<style scoped>
.base-border {
  background-color: #ffe2b3;
  border: 6px solid #f55a36;
  font-size: 28px;
  border-radius: 20px;
}
</style>
